<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量解构</title>
    <style>

    </style>
</head>

<body>
    <script>
        /**ES6 允许按照一定模式，
         * 从数组和对象中提取值，
         * 对变量进行赋值，
         * 这被称为解构赋值。
         * 
        **/

        //1.数组的结构赋值

        const arr = ['arm_A','arm_B','arm_C'];
        let [TeamA,TeamB,TeamC] = arr;
        console.log(TeamA,TeamB,TeamC);
        //输出：arm_A arm_B arm_C


        //2.对象的解构赋值

        const King = {
            name : '雷斯',
            arms : [ '第一集团军', '第二集团军' , '第三集团军']

        };
        console.log(typeof King);

        let {name , arms} = King;
        console.log(name,arms);
        //输出
        //雷斯  ['第一集团军', '第二集团军', '第三集团军']

        //3.复杂解构
        let mona = {
            name:'摩尔加纳',
            age:4,
            skills:['奇迹拳','威风凛凛的风范','迪亚拉玛'],
            persona:[
                {name : '佐罗'},
                {name : '莫丘利'},
                {name : '狄亚哥'}
            ]
        };
        
        let nameTest = {skills:[skill1,skill2,skill3],persona:[filst,second2,third2]} = mona;

        console.log(nameTest.skills);
        console.log(nameTest.persona);
        /**
         *  ['奇迹拳', '威风凛凛的风范', '迪亚拉玛']
        0: "奇迹拳"
        1: "威风凛凛的风范"
        2: "迪亚拉玛"
        length: 3[[Prototype]]
        : Array(0)变量解构.html:59 
        (3) [{…}, {…}, {…}]
        0: {name: '佐罗'}
        1: {name: '莫丘利'}
        2: {name: '狄亚哥'}
        **/


        //注意  ：  频繁使用对象方法、数组元素，就可以使用解构赋值形式



    </script>
</body>
</html>